<template>
  <div class="product-management">
    <h1>{{ title }}</h1>
    
    <!-- 商品表格 -->
    <table class="product-table">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>价格</th>
          <th>标签</th>
          <th>图片</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.name }}</td>
          <td>¥{{ product.price }}</td>
          <td>
            <span class="tag" v-for="tag in product.tags" :key="tag">{{ tag }}</span>
          </td>
          <td>
            <img v-if="product.image" :src="product.image" class="product-image" alt="商品图片">
            <span v-else>无图片</span>
          </td>
          <td>
            <button @click="editProduct(product)" class="btn-edit">编辑</button>
            <button @click="deleteProduct(product.id)" class="btn-delete">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 添加/编辑商品表单 -->
    <div class="product-form">
      <h2>{{ isEditing ? '编辑商品' : '添加商品' }}</h2>
      <div class="form-group">
        <label>商品名称:</label>
        <input v-model="currentProduct.name" type="text">
      </div>
      <div class="form-group">
        <label>价格:</label>
        <input v-model="currentProduct.price" type="number">
      </div>
      <div class="form-group">
        <label>标签 (用逗号分隔):</label>
        <input v-model="tagInput" type="text" placeholder="舒适,保暖,秋冬">
      </div>
      <div class="form-group">
        <label>商品图片:</label>
        <input type="file" @change="handleImageUpload" accept="image/*">
        <img v-if="currentProduct.image" :src="currentProduct.image" class="preview-image">
      </div>
      <button @click="saveProduct" class="btn-save">{{ isEditing ? '更新' : '添加' }}</button>
      <button v-if="isEditing" @click="cancelEdit" class="btn-cancel">取消</button>
    </div>

    <!-- 搜索功能 -->
    <div class="search-box">
      <input v-model="searchQuery" placeholder="搜索商品..." @input="searchProducts">
      <button @click="clearSearch" class="btn-clear">清除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '2203010342 周德波 商品管理',
      products: [
        {
          id: 1,
          name: '夏季专用纸张之粘',
          price: 298,
          tags: ['舒适', '空气', '颜色'],
          image: null
        },
        {
          id: 2,
          name: '冬季隔夜大士热覆烘烤 舒适加湿防水面膜 防滑棉鞋',
          price: 89,
          tags: ['保暖', '防晒', '颜色'],
          image: null
        },
        {
          id: 2,
          name: '冬季隔夜大士热覆烘烤 舒适加湿防水面膜 防滑棉鞋',
          price: 89,
          tags: ['保暖', '防晒', '颜色'],
          image: null
        },
        {
          id: 3,
          name: '秋冬新款大士毛衣 晒头宽松针织衫 微型上衣',
          price: 199,
          tags: ['秋冬', '毛衣', '产品范围片', '颜色'],
          image: null
        },
        {
          id: 4,
          name: '2023春秋制图和大批经典 衬衫 上衣',
          price: 19,
          tags: ['雪纺衫', '打底', '产品范围片', '颜色'],
          image: null
        },
        {
          id: 5,
          name: '长款长袖服装大士毛衣 2022秋冬新款服饰 衬衫 上衣',
          price: 178,
          tags: ['国服', '连衣裙', '产品范围片', '颜色'],
          image: null
        }
      ],
      currentProduct: {
        id: null,
        name: '',
        price: 0,
        tags: [],
        image: null
      },
      tagInput: '',
      isEditing: false,
      searchQuery: '',
      originalProducts: []
    };
  },
  created() {
    // 保存原始商品列表用于搜索后重置
    this.originalProducts = [...this.products];
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.currentProduct.image = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    saveProduct() {
      // 处理标签输入
      this.currentProduct.tags = this.tagInput.split(',').map(tag => tag.trim()).filter(tag => tag);
      
      if (this.isEditing) {
        // 更新商品
        const index = this.products.findIndex(p => p.id === this.currentProduct.id);
        if (index !== -1) {
          this.products.splice(index, 1, {...this.currentProduct});
        }
      } else {
        // 添加新商品
        const newId = Math.max(...this.products.map(p => p.id), 0) + 1;
        this.products.push({
          ...this.currentProduct,
          id: newId
        });
      }
      
      this.resetForm();
    },
    editProduct(product) {
      this.currentProduct = {...product};
      this.tagInput = product.tags.join(', ');
      this.isEditing = true;
    },
    deleteProduct(id) {
      if (confirm('确定要删除这个商品吗？')) {
        this.products = this.products.filter(product => product.id !== id);
      }
    },
    cancelEdit() {
      this.resetForm();
    },
    resetForm() {
      this.currentProduct = {
        id: null,
        name: '',
        price: 0,
        tags: [],
        image: null
      };
      this.tagInput = '';
      this.isEditing = false;
    },
    searchProducts() {
      if (!this.searchQuery) {
        this.products = [...this.originalProducts];
        return;
      }
      
      const query = this.searchQuery.toLowerCase();
      this.products = this.originalProducts.filter(product => 
        product.name.toLowerCase().includes(query) ||
        product.tags.some(tag => tag.toLowerCase().includes(query))
      );
    },
    clearSearch() {
      this.searchQuery = '';
      this.products = [...this.originalProducts];
    }
  }
};
</script>

<style>
.product-management {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.product-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.product-table th, .product-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.product-table th {
  background-color: #f2f2f2;
}

.product-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.product-table tr:hover {
  background-color: #f1f1f1;
}

.tag {
  display: inline-block;
  background-color: #e1f5fe;
  padding: 2px 8px;
  margin: 2px;
  border-radius: 4px;
  font-size: 12px;
}

.product-image {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
}

.preview-image {
  max-width: 150px;
  max-height: 150px;
  margin-top: 10px;
  display: block;
}

.product-form {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.btn-save {
  background-color: #4CAF50;
  color: white;
}

.btn-edit {
  background-color: #2196F3;
  color: white;
}

.btn-delete {
  background-color: #f44336;
  color: white;
}

.btn-cancel {
  background-color: #ff9800;
  color: white;
}

.btn-clear {
  background-color: #9e9e9e;
  color: white;
}

.search-box {
  margin-bottom: 20px;
}

.search-box input {
  padding: 8px;
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}
</style>